<!-- 左侧导航页面 -->
<script lang='ts' setup>
import {
    Document, Menu as IconMenu, Location, Setting, Message, Notebook
} from '@element-plus/icons-vue'
import { reactive, ref, watch, } from "vue"
import { axiosRequests } from "../hooks/axiosRequest"
import { useRoute } from 'vue-router';
import { ElMessage } from 'element-plus'
import userVue from './icons/user.vue'
import uploadPicture from './icons/uploadPicture.vue'
import axios from 'axios'

//使用pinia 
import { userInfoStore } from '@/stores/userInfo'
const userInfo = userInfoStore()
const route = useRoute()
//使用axios方法
const { userpost } = axiosRequests()
const showLogin = ref(false)
const ispass = ref(false)//切换登录 或 注册
const passShow = ref(false) //是否显示密码
const inputType = ref('password')//密码框的状态
const disabled = ref(false)//邮箱按钮是否处于可发送状态
const yzmContent = ref('发送邮箱验证')//验证码
const userShow = ref(true)//登录按钮的显示与否
const loginInfo = reactive({
    email: '',//邮箱
    password: '',//密码
    yzm: '',//绑定验证码
})
//初始化数据
//检查是否有token的存在  保存其登录状态 刷新重新获取token 防止用户修改个人信息其结果不变
if (localStorage.getItem('token')) {
    const a = localStorage.getItem('userShow')
    initInfo() //必须保留  让store的值还在  
    userShow.value = JSON.parse(a!)
}
// 监听数据保留在本地
watch(userShow, (ow, nw) => {
    localStorage.setItem('userShow', JSON.stringify(userShow.value))
})

//与登录有关的方法
let loginEvent = {
    //发送邮箱
    async sendYzm() {
        const result = await userpost('/email/sendEmail', {})
        console.log(123, result);
        disabled.value = true
        let i = 5
        const time = setInterval(() => {
            i--
            yzmContent.value = `${i}秒后可再次发送`
            if (i <= 0) {
                clearInterval(time)
                yzmContent.value = '发送邮箱验证'
                disabled.value = false
            }
        }, 1000)
    },
    //打开登录
    logins() {
        showLogin.value = true
    },
    //关闭登录
    closeLogin() {
        showLogin.value = false
    },
    //前往注册
    goRegister() {
        ispass.value = true
    },
    //前往登录
    goLogin() {
        ispass.value = false
    },
    //显示密码
    showPs() {
        passShow.value = !passShow.value
        passShow.value ? inputType.value = 'text' : inputType.value = 'password'
    }
}
//登录
async function log() {
    const result = await userpost('/email/logins', loginInfo)
    if (result.status === 1) {
        return ElMessage.error('登录失败,请检查你输入的信息')
    }
    //登录成功存放token 
    localStorage.setItem('token', result.token)
    initInfo()
}
//获取用户基本信息如头像地址 用户名等  存放到pinia
async function initInfo() {
    const result = await userInfo.getInitInfo()
    console.log('qqq', result)
    showLogin.value = false
    userShow.value = false
    ElMessage({
        showClose: true,
        message: '登录成功',
        type: 'success',
    })
}
//注册
async function loginAndRe(ispass: boolean) {
    if (ispass) {
        //这是注册
        const result = await userpost('/email/loginRe', loginInfo)
        if (result.status == 1) {
            return ElMessage.error("密码为字母+数字,请符合格式")
        } else {
            ElMessage({
                showClose: true,
                message: '注册成功',
                type: 'success',
            })
        }
    } else {
        //这是登录
        log()
    }

}
//退出登录
function exit() {
    localStorage.removeItem('token');
    //取消暂时头像等信息
    userShow.value = true
    ElMessage({
        showClose: true,
        message: '你已退出登录',
        type: 'success',
    })
}
const showUpdTx = ref(false)
function changePhotoEven(val: { content: boolean; }) {
    showUpdTx.value = val.content
}
function cancelEven(val: boolean) {
    showUpdTx.value = val
}
//监听键盘事件
window.document.onkeydown = function (event) {
    if (event.code === 'Escape') {
        showUpdTx.value = false
    }
}
</script>
<template>
    <div class="navs">
        <el-affix :offset="20">
            <el-row class="tac" style="padding-top: 20px;">
                <el-col>
                    <div id="user" v-if="!userShow">
                        <userVue @change-photo="changePhotoEven" />
                        <el-button class="exit" type="info" size='small' @click="exit()" plain>exit</el-button>
                    </div>
                    <el-menu :default-active="route.name" :router="true" active-text-color="rgb(0,255,127)"
                        class="el-menu-vertical-demo">
                        <h5 class="mb-2" style="margin: 30px 0 20px 35px;font-weight: 500; cursor: pointer;"
                            @click="loginEvent.logins()" v-if="userShow">登录</h5>
                        <el-menu-item index="index">
                            <el-icon>
                                <location />
                            </el-icon>
                            <span>首页</span>
                        </el-menu-item>
                        <el-menu-item index="strategy">
                            <el-icon>
                                <icon-menu />
                            </el-icon>
                            <span>旅游攻略</span>
                        </el-menu-item>
                        <el-menu-item index="recommend">
                            <el-icon>
                                <document />
                            </el-icon>
                            <span>热门推荐</span>
                        </el-menu-item>
                        <el-menu-item index="weather">
                            <el-icon>
                                <setting />
                            </el-icon>
                            <span>地图&天气</span>
                        </el-menu-item>
                        <el-menu-item index="writeArticle">
                            <el-icon>
                                <Notebook />
                            </el-icon>
                            <span>发布</span>
                        </el-menu-item>
                    </el-menu>
                </el-col>
            </el-row>
        </el-affix>
    </div>
    <div class="login" v-if="showLogin">
        <div class="lo">
            <div style="cursor: pointer; text-align: right;margin-right: 15px;padding-top: 10px;"
                @click="loginEvent.closeLogin()">
                <el-icon color="red">
                    <Close />
                </el-icon>
            </div>
            <div style="margin-top: 30px;">
                <span style="display: flex; justify-content: center; font-size: 25px;">LOGIN & REGISTER</span>
            </div>
            <div style="text-align: center;margin-top: 30px;">
                <el-icon color="gray">
                    <Avatar />
                </el-icon>
                <input class="input_item" type="pass" v-model="loginInfo.email" placeholder="请输入你的邮箱:">
            </div>
            <div style="display:flex;justify-content: center;margin-top: 30px;">
                <el-icon color="gray" v-if="!passShow" @click="loginEvent.showPs()" style="cursor:pointer ;">
                    <View />
                </el-icon>
                <el-icon color="gray" v-if="passShow" @click="loginEvent.showPs()" style="cursor:pointer ;">
                    <Hide />
                </el-icon>
                <input class="input_item" :type="inputType" v-model="loginInfo.password" placeholder="请输入你的密码:">
            </div>
            <div style="margin-top: 30px;margin-left: 100px;" v-if="ispass">
                <input style="width: 150px;" class="input_item" v-model="loginInfo.yzm" type="text"
                    placeholder="你收到的验证码：">
                <el-popover placement="top-start" trigger="hover" :content="yzmContent" style="z-index: 999;">
                    <template #reference>
                        <el-button style="margin-left:10px;" type="info" :icon="Message" @click="loginEvent.sendYzm()"
                            :disabled="disabled" />
                    </template>
                </el-popover>
            </div>
            <div style="text-align: center;margin-top: 25px;">
                <el-button @click="loginAndRe(ispass)">{{ ispass ? '注册' : '登录' }}</el-button>
            </div>
            <div class="foot">
                <span style="font-size: 14px;color: rgb(96, 98, 102);">欢迎使用---</span>
                <el-link type="success" @click="loginEvent.goRegister()">未有账号,前往注册;</el-link>
                <el-link type="primary" @click="loginEvent.goLogin()">已有账号,前往登录</el-link>
            </div>
        </div>
    </div>
    <uploadPicture v-if="showUpdTx" @cancel="cancelEven"></uploadPicture>
</template>
<style lang="scss" scoped>
/* 去除默认眼睛样式 input-password */
input[type="password"]::-ms-reveal {
    display: none
}

.navs {
    position: fixed;
    font-size: 20px;
    width: 200px;
    height: 100%;
    background-color: rgb(255, 255, 255);
    z-index: 9;

    #user {
        display: flex;
        margin-left: 50px;
        margin-bottom: 20px;

        .exit {
            border-radius: 8px;
            color: rgb(19, 69, 204);
            align-self: end;
        }
    }
}

.login {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(221, 221, 221, 0.5);
    z-index: 999;

    .lo {
        position: relative;
        top: 200px;
        left: 50%;
        transform: translateX(-50%);
        width: 400px;
        height: 400px;
        border-radius: 20px;
        background-color: white;

        .foot {
            display: flex;
            margin-top: 35px;
            justify-content: center;
        }

        .input_item {
            padding-left: 15px;
            height: 30px;
            line-height: 30px;
            border: 0px;
            border-bottom: 1px solid rgb(67, 141, 226);
            outline: none;
        }
    }
}
</style>
